<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="div">
        <!-- //成绩录入 -->
        <input type="text" placeholder="请输入姓名" v-model="stu.name">
        <input type="text" placeholder="请输入成绩" v-model.number="stu.score" @keyup.enter="onAdd"><br />
        <button @click="onAdd">添加</button>&nbsp;
        <button @click="onSort">排序</button>
        <ul>
            <li v-for="(stu,index) in stuList">{{stu.name}} : {{stu.score}}
                <a href="#" @click="onDelete(index)">删除</a>
            </li>
        </ul>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>

        var app = Vue.createApp({

            data: function () {
                return {
                    stu: {
                        name: '',
                        score: '',
                    },
                    stuList: [
                        {
                            name: "周飘",
                            score: 80
                        },
                        {
                            name: "志文",
                            score: 90
                        },
                        {
                            name: "嘉远",
                            score: 50
                        }
                    ]

                }
            },
            // 存放一些方法，供事件调用
            methods: {
                // 添加到stuList
                onAdd() {
                    if (this.stu.name === '') {
                        alert('请输入姓名')
                        return;
                    }
                    else if(this.stu.score == '') this.stu.score=0;
                    // es6中拷贝一个对象{...this.stu}
                    this.stuList.push({ ...this.stu });

                    // 清空
                    this.stu.name = '';
                    this.stu.score = ''
                },
                onDelete(index) {
                    // 删除

                    if(confirm('确定删除吗?')) this.stuList.splice(index, 1);
                    
                },
                onSort() {
                    this.stuList.sort((a, b) => b.score - a.score)
                }
            },


        }).mount('#div');

    </script>
</body>

</html>